<template>
  <div class="donation-detail-page">
    <div class="detail-container">
      <!-- 返回按钮 -->
      <div class="back-link">
        <el-button link @click="router.back()">
          <el-icon><ArrowLeft /></el-icon>
          返回列表
        </el-button>
      </div>

      <!-- 项目内容 -->
      <div class="project-content">
        <!-- 项目基本信息 -->
        <div class="project-header">
          <div class="cover-image">
            <el-image :src="project.coverImage" fit="cover" />
          </div>
          <div class="header-info">
            <div class="tags">
              <el-tag 
                v-for="tag in project.tags" 
                :key="tag"
                :type="getTagType(tag)"
                effect="light"
                class="tag-item"
              >
                {{ tag }}
              </el-tag>
            </div>
            <h1>{{ project.title }}</h1>
            <div class="meta-info">
              <div class="organization">
                <el-avatar :src="project.orgLogo" :size="24" />
                <span>{{ project.organization }}</span>
              </div>
              <div class="time">
                <el-icon><Timer /></el-icon>
                <span>剩余 {{ project.remainingDays }} 天</span>
              </div>
            </div>

            <!-- 筹款进度 -->
            <div class="progress-section">
              <div class="amount-info">
                <div class="current">
                  <span class="number">¥{{ formatNumber(project.currentAmount) }}</span>
                  <span class="label">已筹金额</span>
                </div>
                <div class="target">
                  <span class="number">¥{{ formatNumber(project.targetAmount) }}</span>
                  <span class="label">目标金额</span>
                </div>
                <div class="supporters">
                  <span class="number">{{ project.supporters }}</span>
                  <span class="label">支持人数</span>
                </div>
              </div>
              <el-progress 
                :percentage="(project.currentAmount / project.targetAmount) * 100"
                :format="(p) => p.toFixed(1) + '%'"
                :stroke-width="12"
                class="progress-bar"
              />
            </div>

            <!-- 捐助按钮 -->
            <div class="action-buttons">
              <el-button type="primary" size="large" @click="showDonateDialog">
                <el-icon><Money /></el-icon>
                立即捐助
              </el-button>
              <el-button size="large" @click="shareProject">
                <el-icon><Share /></el-icon>
                分享项目
              </el-button>
            </div>
          </div>
        </div>

        <!-- 项目详情 -->
        <div class="project-detail">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="项目详情" name="detail">
              <div class="rich-content" v-html="project.content"></div>
            </el-tab-pane>
            
            <el-tab-pane label="捐助记录" name="records">
              <div class="donation-records">
                <div v-for="record in project.donationRecords" 
                     :key="record.id" 
                     class="record-item">
                  <div class="donor-info">
                    <el-avatar :src="record.avatar" :size="40" />
                    <div class="info">
                      <span class="name">{{ record.name }}</span>
                      <span class="time">{{ record.time }}</span>
                    </div>
                  </div>
                  <div class="amount">
                    <span class="number">¥{{ formatNumber(record.amount) }}</span>
                    <span class="message" v-if="record.message">{{ record.message }}</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="项目进展" name="updates">
              <div class="project-updates">
                <div v-for="update in project.updates" 
                     :key="update.id" 
                     class="update-item">
                  <div class="update-header">
                    <span class="time">{{ update.time }}</span>
                    <span class="title">{{ update.title }}</span>
                  </div>
                  <div class="update-content">{{ update.content }}</div>
                  <div class="update-images" v-if="update.images?.length">
                    <el-image 
                      v-for="img in update.images"
                      :key="img"
                      :src="img"
                      fit="cover"
                      :preview-src-list="update.images"
                    />
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>

    <!-- 捐助对话框 -->
    <el-dialog
      v-model="donateDialogVisible"
      title="爱心捐助"
      width="480px"
      :close-on-click-modal="false"
      class="donate-dialog"
    >
      <div class="donate-form">
        <div class="donate-header">
          <div class="project-info">
            <el-image :src="project.coverImage" class="project-thumbnail" />
            <div class="info">
              <h3>{{ project.title }}</h3>
              <div class="organization">
                <el-avatar :src="project.orgLogo" :size="20" />
                <span>{{ project.organization }}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="amount-section">
          <h4>选择捐助金额</h4>
          <div class="amount-options">
            <div 
              v-for="amount in [10, 50, 100, 500]" 
              :key="amount"
              class="amount-option"
              :class="{ active: donateAmount === amount && !customAmount }"
              @click="selectAmount(amount)"
            >
              <span class="amount">¥{{ amount }}</span>
              <span class="label" v-if="amount === 10">一杯咖啡</span>
              <span class="label" v-else-if="amount === 50">一顿午餐</span>
              <span class="label" v-else-if="amount === 100">一次环保</span>
              <span class="label" v-else>一份大爱</span>
            </div>
          </div>
          
          <div class="custom-amount">
            <el-input
              v-model="customAmount"
              placeholder="自定义金额"
              type="number"
              min="1"
              @input="handleCustomAmount"
            >
              <template #prefix>¥</template>
            </el-input>
          </div>
        </div>

        <div class="message-section">
          <h4>留言寄语</h4>
          <el-input
            v-model="donateMessage"
            type="textarea"
            :rows="3"
            placeholder="写下您的爱心寄语（选填）"
            maxlength="100"
            show-word-limit
            resize="none"
          />
        </div>

        <div class="payment-section">
          <h4>支付方式</h4>
          <div class="payment-options">
            <div 
              class="payment-option"
              :class="{ active: paymentMethod === 'wechat' }"
              @click="paymentMethod = 'wechat'"
            >
              <el-icon><Wallet /></el-icon>
              <span>微信支付</span>
            </div>
            <div 
              class="payment-option"
              :class="{ active: paymentMethod === 'alipay' }"
              @click="paymentMethod = 'alipay'"
            >
              <el-icon><CreditCard /></el-icon>
              <span>支付宝</span>
            </div>
          </div>
        </div>

        <div class="donate-summary">
          <div class="amount-display">
            <span class="label">捐助金额</span>
            <span class="amount">¥{{ customAmount || donateAmount }}</span>
          </div>
          <el-button type="primary" size="large" @click="confirmDonate" :disabled="!isValidAmount">
            确认捐助
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  ArrowLeft,
  Timer,
  Money,
  Share,
  Wallet,
  CreditCard
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const activeTab = ref('detail')
const donateDialogVisible = ref(false)
const donateAmount = ref('100')
const customAmount = ref('')
const donateMessage = ref('')
const paymentMethod = ref('wechat')

// 示例数据
const project = ref({
  id: 1,
  title: '守护海龟行动：建立海龟救助中心',
  coverImage: 'https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?w=1600',
  tags: ['海洋生物保护', '紧急救助'],
  organization: '海洋生态保护协会',
  orgLogo: 'https://avatars.githubusercontent.com/u/1?v=4',
  remainingDays: 25,
  currentAmount: 158600,
  targetAmount: 300000,
  supporters: 1256,
  content: `
    <h3>项目背景</h3>
    <p>近年来，由于海洋污染和人类活动的影响，海龟的生存状况日益恶化。每年都有大量海龟因误食塑料、渔网缠绕等原因需要救助。</p>
    
    <h3>项目目标</h3>
    <p>我们计划在南海岸建立一个专业的海龟救助中心，为受伤和生病的海龟提供及时救助和康复照料。</p>
    
    <h3>资金用途</h3>
    <ul>
      <li>救助中心场地建设：150,000元</li>
      <li>医疗设备采购：80,000元</li>
      <li>康复池建设：50,000元</li>
      <li>运营费用：20,000元</li>
    </ul>
    
    <h3>项目成效</h3>
    <p>救助中心建成后，预计每年可以救助100-150只海龟，同时将作为海洋生态保护的科普教育基地。</p>
  `,
  donationRecords: [
    {
      id: 1,
      name: '匿名用户',
      avatar: 'https://avatars.githubusercontent.com/u/1?v=4',
      amount: 1000,
      time: '2024-03-15 14:30',
      message: '保护海龟，守护海洋生态！'
    },
    {
      id: 2,
      name: '海洋之心',
      avatar: 'https://avatars.githubusercontent.com/u/2?v=4',
      amount: 500,
      time: '2024-03-15 13:25'
    }
  ],
  updates: [
    {
      id: 1,
      time: '2024-03-15',
      title: '场地选址完成',
      content: '经过多方考察，我们已经确定了救助中心的选址，位于南海岸生态保护区附近...',
      images: [
        'https://images.unsplash.com/photo-1582967788606-a171c1080cb0?w=800',
        'https://images.unsplash.com/photo-1591025207163-942350e47db2?w=800'
      ]
    },
    {
      id: 2,
      time: '2024-03-10',
      title: '设备订购进展',
      content: '已完成首批医疗设备的订购，包括B超机、手术器械等...'
    }
  ]
})

// 格式化数字
const formatNumber = (num) => {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

// 获取标签类型
const getTagType = (tag) => {
  const tagTypes = {
    '海洋生物保护': 'primary',
    '紧急救助': 'danger',
    '环境教育': 'success',
    '科研项目': 'warning'
  }
  return tagTypes[tag] || ''
}

// 显示捐助对话框
const showDonateDialog = () => {
  donateDialogVisible.value = true
}

// 确认捐助
const confirmDonate = () => {
  const amount = customAmount.value || donateAmount.value
  if (!amount || amount <= 0) {
    ElMessage.warning('请输入有效的捐助金额')
    return
  }
  
  ElMessage.success('捐助成功！感谢您的爱心')
  donateDialogVisible.value = false
  // 这里应该调用实际的支付API
}

// 分享项目
const shareProject = () => {
  ElMessage.success('分享功能开发中')
  // 这里实现分享功能
}

const selectAmount = (amount) => {
  donateAmount.value = amount
  customAmount.value = ''
}

const handleCustomAmount = (value) => {
  if (value) {
    donateAmount.value = null
  }
}

const isValidAmount = computed(() => {
  const amount = customAmount.value || donateAmount.value
  return amount && amount > 0
})

onMounted(() => {
  // 这里应该根据路由参数获取项目详情
  console.log('Project ID:', route.params.id)
})
</script>

<style scoped lang="scss">
.donation-detail-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 40px 0;

  .detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;

    .back-link {
      margin-bottom: 20px;
    }

    .project-content {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

      .project-header {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        padding: 40px;

        .cover-image {
          border-radius: 12px;
          overflow: hidden;
          aspect-ratio: 16/9;

          .el-image {
            width: 100%;
            height: 100%;
          }
        }

        .header-info {
          display: flex;
          flex-direction: column;
          gap: 20px;

          .tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
          }

          h1 {
            font-size: 28px;
            color: #1f2937;
            line-height: 1.4;
            margin: 0;
          }

          .meta-info {
            display: flex;
            align-items: center;
            gap: 20px;
            color: #64748b;

            .organization {
              display: flex;
              align-items: center;
              gap: 8px;
            }

            .time {
              display: flex;
              align-items: center;
              gap: 4px;
            }
          }

          .progress-section {
            background: #f8fafc;
            border-radius: 12px;
            padding: 24px;

            .amount-info {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              gap: 20px;
              margin-bottom: 20px;

              > div {
                text-align: center;

                .number {
                  display: block;
                  font-size: 24px;
                  font-weight: 600;
                  color: #1f2937;
                  margin-bottom: 4px;
                }

                .label {
                  color: #64748b;
                  font-size: 14px;
                }
              }
            }

            .progress-bar {
              margin-top: 16px;
            }
          }

          .action-buttons {
            display: flex;
            gap: 16px;
            margin-top: auto;
          }
        }
      }

      .project-detail {
        border-top: 1px solid #e5e7eb;
        padding: 40px;

        .rich-content {
          color: #1f2937;
          line-height: 1.8;

          h3 {
            font-size: 20px;
            margin: 30px 0 15px;
            &:first-child {
              margin-top: 0;
            }
          }

          p {
            margin-bottom: 16px;
          }

          ul {
            margin: 16px 0;
            padding-left: 20px;

            li {
              margin-bottom: 8px;
            }
          }
        }

        .donation-records {
          .record-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid #e5e7eb;

            &:last-child {
              border-bottom: none;
            }

            .donor-info {
              display: flex;
              align-items: center;
              gap: 12px;

              .info {
                display: flex;
                flex-direction: column;

                .name {
                  font-weight: 500;
                  color: #1f2937;
                }

                .time {
                  font-size: 14px;
                  color: #64748b;
                }
              }
            }

            .amount {
              text-align: right;

              .number {
                display: block;
                font-size: 18px;
                font-weight: 600;
                color: #1f2937;
              }

              .message {
                display: block;
                font-size: 14px;
                color: #64748b;
                margin-top: 4px;
              }
            }
          }
        }

        .project-updates {
          .update-item {
            padding: 24px 0;
            border-bottom: 1px solid #e5e7eb;

            &:last-child {
              border-bottom: none;
            }

            .update-header {
              margin-bottom: 12px;

              .time {
                font-size: 14px;
                color: #64748b;
                margin-right: 12px;
              }

              .title {
                font-size: 16px;
                font-weight: 500;
                color: #1f2937;
              }
            }

            .update-content {
              color: #374151;
              line-height: 1.6;
              margin-bottom: 16px;
            }

            .update-images {
              display: grid;
              grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
              gap: 12px;

              .el-image {
                width: 100%;
                height: 150px;
                border-radius: 8px;
              }
            }
          }
        }
      }
    }
  }
}

.donate-dialog {
  :deep(.el-dialog__header) {
    margin: 0;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    
    .el-dialog__title {
      font-size: 20px;
      font-weight: 600;
      color: #1f2937;
    }
  }

  :deep(.el-dialog__body) {
    padding: 0;
  }

  .donate-form {
    .donate-header {
      padding: 20px 24px;
      background: #f8fafc;
      
      .project-info {
        display: flex;
        gap: 16px;
        align-items: center;

        .project-thumbnail {
          width: 80px;
          height: 60px;
          border-radius: 8px;
          object-fit: cover;
        }

        .info {
          h3 {
            font-size: 16px;
            font-weight: 500;
            color: #1f2937;
            margin: 0 0 8px;
          }

          .organization {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #64748b;
            font-size: 14px;
          }
        }
      }
    }

    .amount-section,
    .message-section,
    .payment-section {
      padding: 24px;
      border-bottom: 1px solid #e5e7eb;

      h4 {
        font-size: 16px;
        font-weight: 500;
        color: #1f2937;
        margin: 0 0 16px;
      }
    }

    .amount-options {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-bottom: 16px;

      .amount-option {
        background: #f8fafc;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        padding: 16px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;

        &:hover {
          border-color: #60a5fa;
          background: #f0f9ff;
        }

        &.active {
          border-color: #2563eb;
          background: #eff6ff;
        }

        .amount {
          display: block;
          font-size: 24px;
          font-weight: 600;
          color: #1f2937;
          margin-bottom: 4px;
        }

        .label {
          font-size: 14px;
          color: #64748b;
        }
      }
    }

    .custom-amount {
      :deep(.el-input) {
        .el-input__wrapper {
          padding: 12px;
        }

        .el-input__prefix {
          font-weight: 500;
        }

        input {
          font-size: 16px;
          text-align: left;
          padding-left: 8px;
        }
      }
    }

    .payment-options {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;

      .payment-option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 16px;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          border-color: #60a5fa;
          background: #f0f9ff;
        }

        &.active {
          border-color: #2563eb;
          background: #eff6ff;
        }

        .el-icon {
          font-size: 24px;
          color: #2563eb;
        }

        span {
          font-size: 16px;
          color: #1f2937;
        }
      }
    }

    .donate-summary {
      padding: 24px;
      background: #f8fafc;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .amount-display {
        .label {
          font-size: 14px;
          color: #64748b;
          margin-right: 12px;
        }

        .amount {
          font-size: 24px;
          font-weight: 600;
          color: #2563eb;
        }
      }

      .el-button {
        min-width: 120px;
      }
    }
  }
}

// 移动端适配
@media (max-width: 480px) {
  .donate-dialog {
    :deep(.el-dialog) {
      width: 90% !important;
      margin: 0 auto;
    }

    .donate-form {
      .amount-options,
      .payment-options {
        grid-template-columns: 1fr;
      }

      .donate-summary {
        flex-direction: column;
        gap: 16px;

        .el-button {
          width: 100%;
        }
      }
    }
  }
}
</style> 